<template>
  <div class="hello">
    <div ref="heatsample" style="width:540px;height:540px;position:absolute;top:0;left:0" />
  </div>
</template>

<script>
import h337 from "heatmap.js";

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    getColorLevelValue() {
      let gradient = new Object();
      //如果觉得颜色不够好，则调整这四个数字，第一个是蓝色增加，第二个是绿色，第三个黄色，第四个是红色，最大255，最小0，后面的肯定要比前面的大，等于把255分成四个部分
      //这里算法主要就是调整rgb的三个值，分成四部分，第一阶段蓝色固定255，让绿色从0一直升到255，这时候展示颜色偏蓝，第二阶段绿色固定255，让蓝色从255一直降到0，这时候整体颜色为蓝向绿转
      //第三阶段绿色固定255，让红色从0一直升到255，这时候整体颜色为绿向黄转变，第四阶段红色固定255，让绿色从255一直降到0，这时候整体颜色为黄色向红色转变
      let adArray = new Array(100, 220, 242, 255);
      let keyArray = new Array();
      let keyAddArray = new Array();
      //这里是设置四个阶段上限的key值
      keyArray[0] = parseFloat((adArray[0] / 255).toFixed(3));
      keyArray[1] = parseFloat((adArray[1] / 255).toFixed(3));
      keyArray[2] = parseFloat((adArray[2] / 255).toFixed(3));
      keyArray[3] = parseFloat((adArray[3] / 255).toFixed(3));
      //console.log(keyArray);
      //这里是设置四个阶段key值每次变化的大小
      keyAddArray[0] = (keyArray[0] / adArray[0]).toFixed(3);
      keyAddArray[1] = (
        (keyArray[1] - keyArray[0]) /
        (adArray[1] - adArray[0])
      ).toFixed(3);
      keyAddArray[2] = (
        (keyArray[2] - keyArray[1]) /
        (adArray[2] - adArray[1])
      ).toFixed(3);
      keyAddArray[3] = (
        (keyArray[3] - keyArray[2]) /
        (adArray[3] - adArray[2])
      ).toFixed(3);
      // console.log(keyAddArray);
      let colorArray = new Array(
        adArray[0],
        adArray[1] - adArray[0],
        adArray[2] - adArray[1],
        adArray[3] - adArray[2]
      );
      let colorChangeArray = new Array();
      //这里是设置四个阶段rgb值每次变化的大小，这里有两个方案，一个是快速升到255，超过255部分则为最大255，用Math.ceil方法，把小数后的值往前加1，
      // 一个是使得变化的值绝对不超过255，这个使用parseInt方法，省略小数点后的值
      colorChangeArray[0] = Math.ceil(255 / colorArray[0]);
      colorChangeArray[1] = Math.ceil(255 / colorArray[1]);
      colorChangeArray[2] = Math.ceil(255 / colorArray[2]);
      colorChangeArray[3] = Math.ceil(255 / colorArray[3]);
      //console.log(colorArray);
      for (let ad = 0; ad <= 255; ad++) {
        let color = 0;
        let key = "";
        //把ad值分为4个段
        if (ad <= adArray[0]) {
          color = ad * colorChangeArray[0];
          color = color > 255 ? 255 : color;
          key = ad * keyAddArray[0];
          key = key > keyArray[0] ? keyArray[0] : key;
          gradient[key.toFixed(3)] = "rgb(0," + color + ",255)";
        } else if (ad <= adArray[1] && ad > adArray[0]) {
          color = 255 - (ad - adArray[0] - 1) * colorChangeArray[1];
          color = color < 0 ? 0 : color;
          key = (ad - adArray[0]) * keyAddArray[1] + keyArray[0];
          key = key > keyArray[1] ? keyArray[1] : key;
          gradient[key.toFixed(3)] = "rgb(0,255," + color + ")";
        } else if (ad <= adArray[2] && ad > adArray[1]) {
          color = (ad - adArray[1]) * colorChangeArray[2];
          color = color > 255 ? 255 : color;
          key = (ad - adArray[1]) * keyAddArray[2] + keyArray[1];
          key = key > keyArray[2] ? keyArray[2] : key;
          gradient[key.toFixed(3)] = "rgb(" + color + ",255,0)";
        } else if (ad > adArray[2]) {
          color = 255 - (ad - adArray[2] - 1) * colorChangeArray[3];
          color = color < 0 ? 0 : color;
          key = (ad - adArray[2]) * keyAddArray[3] + keyArray[2];
          key = key > keyArray[3] ? keyArray[3] : key;
          gradient[key.toFixed(3)] = "rgb(255," + color + ",0)";
        }
      }
      //console.log(gradient)
      return gradient;
    }
  },
  mounted: function() {
    var dst = this.$refs.heatsample;
    var gradient = this.getColorLevelValue();
    var heatmap = h337.create({
      container: dst,
      radius: 17,
      blur: 0.8,
      gradient: gradient
    });

    heatmap.setData({
      max: 255,
      data: [
        { x: 171, y: 99, value: 128 },
        { x: 180, y: 99, value: 100 },
        { x: 135, y: 108, value: 138 },
        { x: 144, y: 108, value: 104 },
        { x: 153, y: 108, value: 73 },
        { x: 162, y: 108, value: 126 },
        { x: 171, y: 108, value: 130 },
        { x: 180, y: 108, value: 99 },
        { x: 189, y: 108, value: 106 },
        { x: 396, y: 108, value: 67 },
        { x: 405, y: 108, value: 80 },
        { x: 414, y: 108, value: 63 },
        { x: 432, y: 108, value: 51 },
        { x: 117, y: 117, value: 110 },
        { x: 126, y: 117, value: 98 },
        { x: 135, y: 117, value: 145 },
        { x: 144, y: 117, value: 90 },
        { x: 153, y: 117, value: 73 },
        { x: 162, y: 117, value: 117 },
        { x: 171, y: 117, value: 130 },
        { x: 180, y: 117, value: 120 },
        { x: 189, y: 117, value: 151 },
        { x: 198, y: 117, value: 76 },
        { x: 369, y: 117, value: 71 },
        { x: 378, y: 117, value: 90 },
        { x: 387, y: 117, value: 97 },
        { x: 396, y: 117, value: 81 },
        { x: 405, y: 117, value: 88 },
        { x: 414, y: 117, value: 97 },
        { x: 423, y: 117, value: 107 },
        { x: 432, y: 117, value: 120 },
        { x: 441, y: 117, value: 89 },
        { x: 450, y: 117, value: 103 },
        { x: 99, y: 126, value: 128 },
        { x: 108, y: 126, value: 96 },
        { x: 117, y: 126, value: 109 },
        { x: 126, y: 126, value: 101 },
        { x: 135, y: 126, value: 119 },
        { x: 162, y: 126, value: 96 },
        { x: 171, y: 126, value: 133 },
        { x: 180, y: 126, value: 133 },
        { x: 189, y: 126, value: 145 },
        { x: 198, y: 126, value: 84 },
        { x: 369, y: 126, value: 64 },
        { x: 378, y: 126, value: 84 },
        { x: 387, y: 126, value: 89 },
        { x: 396, y: 126, value: 141 },
        { x: 405, y: 126, value: 76 },
        { x: 414, y: 126, value: 62 },
        { x: 423, y: 126, value: 61 },
        { x: 432, y: 126, value: 98 },
        { x: 441, y: 126, value: 71 },
        { x: 450, y: 126, value: 111 },
        { x: 459, y: 126, value: 63 },
        { x: 90, y: 135, value: 45 },
        { x: 99, y: 135, value: 135 },
        { x: 108, y: 135, value: 94 },
        { x: 126, y: 135, value: 77 },
        { x: 135, y: 135, value: 107 },
        { x: 162, y: 135, value: 79 },
        { x: 171, y: 135, value: 69 },
        { x: 180, y: 135, value: 107 },
        { x: 189, y: 135, value: 133 },
        { x: 198, y: 135, value: 87 },
        { x: 378, y: 135, value: 61 },
        { x: 387, y: 135, value: 59 },
        { x: 396, y: 135, value: 114 },
        { x: 405, y: 135, value: 142 },
        { x: 414, y: 135, value: 64 },
        { x: 423, y: 135, value: 57 },
        { x: 441, y: 135, value: 63 },
        { x: 450, y: 135, value: 107 },
        { x: 459, y: 135, value: 68 },
        { x: 99, y: 144, value: 105 },
        { x: 108, y: 144, value: 79 },
        { x: 117, y: 144, value: 86 },
        { x: 126, y: 144, value: 84 },
        { x: 135, y: 144, value: 97 },
        { x: 144, y: 144, value: 94 },
        { x: 153, y: 144, value: 82 },
        { x: 162, y: 144, value: 116 },
        { x: 171, y: 144, value: 137 },
        { x: 180, y: 144, value: 138 },
        { x: 189, y: 144, value: 153 },
        { x: 198, y: 144, value: 143 },
        { x: 207, y: 144, value: 91 },
        { x: 369, y: 144, value: 68 },
        { x: 378, y: 144, value: 89 },
        { x: 387, y: 144, value: 82 },
        { x: 396, y: 144, value: 64 },
        { x: 405, y: 144, value: 52 },
        { x: 414, y: 144, value: 62 },
        { x: 423, y: 144, value: 57 },
        { x: 432, y: 144, value: 53 },
        { x: 441, y: 144, value: 62 },
        { x: 450, y: 144, value: 69 },
        { x: 459, y: 144, value: 51 },
        { x: 99, y: 153, value: 111 },
        { x: 108, y: 153, value: 95 },
        { x: 117, y: 153, value: 103 },
        { x: 126, y: 153, value: 99 },
        { x: 135, y: 153, value: 105 },
        { x: 144, y: 153, value: 75 },
        { x: 153, y: 153, value: 62 },
        { x: 162, y: 153, value: 93 },
        { x: 171, y: 153, value: 132 },
        { x: 180, y: 153, value: 120 },
        { x: 189, y: 153, value: 147 },
        { x: 198, y: 153, value: 139 },
        { x: 207, y: 153, value: 120 },
        { x: 369, y: 153, value: 100 },
        { x: 378, y: 153, value: 120 },
        { x: 387, y: 153, value: 132 },
        { x: 396, y: 153, value: 115 },
        { x: 405, y: 153, value: 87 },
        { x: 414, y: 153, value: 117 },
        { x: 423, y: 153, value: 111 },
        { x: 432, y: 153, value: 98 },
        { x: 441, y: 153, value: 111 },
        { x: 450, y: 153, value: 94 },
        { x: 459, y: 153, value: 70 },
        { x: 99, y: 162, value: 90 },
        { x: 108, y: 162, value: 90 },
        { x: 117, y: 162, value: 96 },
        { x: 126, y: 162, value: 111 },
        { x: 135, y: 162, value: 132 },
        { x: 144, y: 162, value: 112 },
        { x: 153, y: 162, value: 106 },
        { x: 162, y: 162, value: 142 },
        { x: 171, y: 162, value: 139 },
        { x: 180, y: 162, value: 132 },
        { x: 189, y: 162, value: 147 },
        { x: 198, y: 162, value: 144 },
        { x: 207, y: 162, value: 142 },
        { x: 369, y: 162, value: 114 },
        { x: 378, y: 162, value: 132 },
        { x: 387, y: 162, value: 145 },
        { x: 396, y: 162, value: 137 },
        { x: 405, y: 162, value: 126 },
        { x: 414, y: 162, value: 156 },
        { x: 423, y: 162, value: 128 },
        { x: 432, y: 162, value: 114 },
        { x: 441, y: 162, value: 139 },
        { x: 450, y: 162, value: 144 },
        { x: 459, y: 162, value: 106 },
        { x: 99, y: 171, value: 90 },
        { x: 108, y: 171, value: 106 },
        { x: 117, y: 171, value: 131 },
        { x: 126, y: 171, value: 121 },
        { x: 135, y: 171, value: 134 },
        { x: 144, y: 171, value: 110 },
        { x: 153, y: 171, value: 113 },
        { x: 162, y: 171, value: 140 },
        { x: 171, y: 171, value: 149 },
        { x: 180, y: 171, value: 135 },
        { x: 189, y: 171, value: 144 },
        { x: 198, y: 171, value: 148 },
        { x: 207, y: 171, value: 150 },
        { x: 369, y: 171, value: 112 },
        { x: 378, y: 171, value: 143 },
        { x: 387, y: 171, value: 149 },
        { x: 396, y: 171, value: 135 },
        { x: 405, y: 171, value: 136 },
        { x: 414, y: 171, value: 133 },
        { x: 423, y: 171, value: 128 },
        { x: 432, y: 171, value: 114 },
        { x: 441, y: 171, value: 119 },
        { x: 450, y: 171, value: 138 },
        { x: 459, y: 171, value: 107 },
        { x: 99, y: 180, value: 122 },
        { x: 108, y: 180, value: 115 },
        { x: 117, y: 180, value: 131 },
        { x: 126, y: 180, value: 131 },
        { x: 135, y: 180, value: 136 },
        { x: 144, y: 180, value: 114 },
        { x: 153, y: 180, value: 105 },
        { x: 162, y: 180, value: 143 },
        { x: 171, y: 180, value: 149 },
        { x: 180, y: 180, value: 138 },
        { x: 189, y: 180, value: 147 },
        { x: 198, y: 180, value: 150 },
        { x: 207, y: 180, value: 151 },
        { x: 369, y: 180, value: 124 },
        { x: 378, y: 180, value: 151 },
        { x: 387, y: 180, value: 136 },
        { x: 396, y: 180, value: 139 },
        { x: 405, y: 180, value: 150 },
        { x: 414, y: 180, value: 141 },
        { x: 423, y: 180, value: 146 },
        { x: 432, y: 180, value: 128 },
        { x: 441, y: 180, value: 125 },
        { x: 450, y: 180, value: 132 },
        { x: 459, y: 180, value: 115 },
        { x: 468, y: 180, value: 68 },
        { x: 477, y: 180, value: 84 },
        { x: 99, y: 189, value: 86 },
        { x: 108, y: 189, value: 101 },
        { x: 117, y: 189, value: 114 },
        { x: 126, y: 189, value: 112 },
        { x: 135, y: 189, value: 117 },
        { x: 144, y: 189, value: 88 },
        { x: 153, y: 189, value: 96 },
        { x: 162, y: 189, value: 120 },
        { x: 171, y: 189, value: 120 },
        { x: 180, y: 189, value: 113 },
        { x: 189, y: 189, value: 122 },
        { x: 198, y: 189, value: 118 },
        { x: 207, y: 189, value: 116 },
        { x: 369, y: 189, value: 98 },
        { x: 378, y: 189, value: 102 },
        { x: 387, y: 189, value: 115 },
        { x: 396, y: 189, value: 112 },
        { x: 405, y: 189, value: 121 },
        { x: 414, y: 189, value: 121 },
        { x: 423, y: 189, value: 126 },
        { x: 432, y: 189, value: 129 },
        { x: 441, y: 189, value: 125 },
        { x: 450, y: 189, value: 135 },
        { x: 459, y: 189, value: 104 },
        { x: 468, y: 189, value: 59 },
        { x: 477, y: 189, value: 81 },
        { x: 90, y: 198, value: 126 },
        { x: 99, y: 198, value: 156 },
        { x: 108, y: 198, value: 122 },
        { x: 117, y: 198, value: 132 },
        { x: 126, y: 198, value: 128 },
        { x: 135, y: 198, value: 130 },
        { x: 144, y: 198, value: 114 },
        { x: 153, y: 198, value: 125 },
        { x: 162, y: 198, value: 141 },
        { x: 171, y: 198, value: 139 },
        { x: 180, y: 198, value: 126 },
        { x: 189, y: 198, value: 132 },
        { x: 198, y: 198, value: 124 },
        { x: 207, y: 198, value: 124 },
        { x: 369, y: 198, value: 116 },
        { x: 378, y: 198, value: 131 },
        { x: 387, y: 198, value: 130 },
        { x: 396, y: 198, value: 132 },
        { x: 405, y: 198, value: 140 },
        { x: 414, y: 198, value: 141 },
        { x: 423, y: 198, value: 144 },
        { x: 432, y: 198, value: 146 },
        { x: 441, y: 198, value: 142 },
        { x: 450, y: 198, value: 147 },
        { x: 459, y: 198, value: 120 },
        { x: 468, y: 198, value: 81 },
        { x: 477, y: 198, value: 110 },
        { x: 486, y: 198, value: 48 },
        { x: 90, y: 207, value: 138 },
        { x: 99, y: 207, value: 153 },
        { x: 108, y: 207, value: 119 },
        { x: 117, y: 207, value: 131 },
        { x: 126, y: 207, value: 122 },
        { x: 135, y: 207, value: 121 },
        { x: 144, y: 207, value: 103 },
        { x: 153, y: 207, value: 113 },
        { x: 162, y: 207, value: 130 },
        { x: 171, y: 207, value: 124 },
        { x: 180, y: 207, value: 109 },
        { x: 189, y: 207, value: 111 },
        { x: 198, y: 207, value: 92 },
        { x: 207, y: 207, value: 93 },
        { x: 369, y: 207, value: 82 },
        { x: 378, y: 207, value: 113 },
        { x: 387, y: 207, value: 138 },
        { x: 396, y: 207, value: 119 },
        { x: 405, y: 207, value: 120 },
        { x: 414, y: 207, value: 133 },
        { x: 423, y: 207, value: 133 },
        { x: 432, y: 207, value: 137 },
        { x: 441, y: 207, value: 131 },
        { x: 450, y: 207, value: 142 },
        { x: 459, y: 207, value: 121 },
        { x: 468, y: 207, value: 74 },
        { x: 477, y: 207, value: 109 },
        { x: 486, y: 207, value: 64 },
        { x: 90, y: 216, value: 128 },
        { x: 99, y: 216, value: 176 },
        { x: 108, y: 216, value: 140 },
        { x: 117, y: 216, value: 131 },
        { x: 126, y: 216, value: 121 },
        { x: 135, y: 216, value: 129 },
        { x: 144, y: 216, value: 104 },
        { x: 153, y: 216, value: 104 },
        { x: 162, y: 216, value: 119 },
        { x: 171, y: 216, value: 120 },
        { x: 189, y: 216, value: 100 },
        { x: 198, y: 216, value: 80 },
        { x: 369, y: 216, value: 71 },
        { x: 378, y: 216, value: 96 },
        { x: 387, y: 216, value: 111 },
        { x: 396, y: 216, value: 102 },
        { x: 405, y: 216, value: 108 },
        { x: 414, y: 216, value: 130 },
        { x: 423, y: 216, value: 132 },
        { x: 432, y: 216, value: 133 },
        { x: 441, y: 216, value: 127 },
        { x: 450, y: 216, value: 138 },
        { x: 459, y: 216, value: 120 },
        { x: 468, y: 216, value: 81 },
        { x: 477, y: 216, value: 110 },
        { x: 486, y: 216, value: 87 },
        { x: 90, y: 225, value: 141 },
        { x: 99, y: 225, value: 155 },
        { x: 108, y: 225, value: 135 },
        { x: 117, y: 225, value: 135 },
        { x: 126, y: 225, value: 119 },
        { x: 135, y: 225, value: 117 },
        { x: 144, y: 225, value: 98 },
        { x: 153, y: 225, value: 83 },
        { x: 162, y: 225, value: 76 },
        { x: 378, y: 225, value: 74 },
        { x: 387, y: 225, value: 91 },
        { x: 396, y: 225, value: 94 },
        { x: 405, y: 225, value: 105 },
        { x: 414, y: 225, value: 108 },
        { x: 423, y: 225, value: 126 },
        { x: 432, y: 225, value: 125 },
        { x: 441, y: 225, value: 127 },
        { x: 450, y: 225, value: 148 },
        { x: 459, y: 225, value: 145 },
        { x: 468, y: 225, value: 90 },
        { x: 477, y: 225, value: 142 },
        { x: 486, y: 225, value: 81 },
        { x: 99, y: 234, value: 144 },
        { x: 108, y: 234, value: 113 },
        { x: 117, y: 234, value: 123 },
        { x: 126, y: 234, value: 103 },
        { x: 135, y: 234, value: 97 },
        { x: 144, y: 234, value: 88 },
        { x: 153, y: 234, value: 75 },
        { x: 162, y: 234, value: 89 },
        { x: 387, y: 234, value: 61 },
        { x: 396, y: 234, value: 72 },
        { x: 405, y: 234, value: 95 },
        { x: 414, y: 234, value: 91 },
        { x: 423, y: 234, value: 108 },
        { x: 432, y: 234, value: 95 },
        { x: 441, y: 234, value: 88 },
        { x: 450, y: 234, value: 120 },
        { x: 459, y: 234, value: 117 },
        { x: 468, y: 234, value: 120 },
        { x: 477, y: 234, value: 131 },
        { x: 486, y: 234, value: 107 },
        { x: 99, y: 243, value: 128 },
        { x: 108, y: 243, value: 131 },
        { x: 117, y: 243, value: 121 },
        { x: 126, y: 243, value: 112 },
        { x: 135, y: 243, value: 97 },
        { x: 405, y: 243, value: 64 },
        { x: 414, y: 243, value: 83 },
        { x: 423, y: 243, value: 110 },
        { x: 432, y: 243, value: 102 },
        { x: 441, y: 243, value: 56 },
        { x: 450, y: 243, value: 72 },
        { x: 459, y: 243, value: 196 },
        { x: 468, y: 243, value: 110 },
        { x: 477, y: 243, value: 142 },
        { x: 486, y: 243, value: 54 },
        { x: 108, y: 252, value: 121 },
        { x: 117, y: 252, value: 130 },
        { x: 126, y: 252, value: 117 },
        { x: 135, y: 252, value: 83 },
        { x: 414, y: 252, value: 70 },
        { x: 423, y: 252, value: 98 },
        { x: 432, y: 252, value: 119 },
        { x: 441, y: 252, value: 104 },
        { x: 450, y: 252, value: 95 },
        { x: 459, y: 252, value: 56 },
        { x: 468, y: 252, value: 94 },
        { x: 477, y: 252, value: 120 },
        { x: 108, y: 261, value: 118 },
        { x: 117, y: 261, value: 137 },
        { x: 126, y: 261, value: 116 },
        { x: 135, y: 261, value: 83 },
        { x: 144, y: 261, value: 89 },
        { x: 414, y: 261, value: 66 },
        { x: 423, y: 261, value: 92 },
        { x: 432, y: 261, value: 111 },
        { x: 441, y: 261, value: 105 },
        { x: 450, y: 261, value: 127 },
        { x: 459, y: 261, value: 80 },
        { x: 468, y: 261, value: 58 },
        { x: 477, y: 261, value: 52 },
        { x: 108, y: 270, value: 107 },
        { x: 117, y: 270, value: 136 },
        { x: 126, y: 270, value: 139 },
        { x: 135, y: 270, value: 96 },
        { x: 144, y: 270, value: 89 },
        { x: 153, y: 270, value: 79 },
        { x: 414, y: 270, value: 62 },
        { x: 423, y: 270, value: 59 },
        { x: 432, y: 270, value: 82 },
        { x: 441, y: 270, value: 96 },
        { x: 450, y: 270, value: 122 },
        { x: 459, y: 270, value: 69 },
        { x: 117, y: 279, value: 144 },
        { x: 126, y: 279, value: 121 },
        { x: 135, y: 279, value: 102 },
        { x: 144, y: 279, value: 97 },
        { x: 153, y: 279, value: 89 },
        { x: 414, y: 279, value: 75 },
        { x: 423, y: 279, value: 101 },
        { x: 432, y: 279, value: 98 },
        { x: 441, y: 279, value: 80 },
        { x: 450, y: 279, value: 116 },
        { x: 459, y: 279, value: 77 },
        { x: 117, y: 288, value: 109 },
        { x: 126, y: 288, value: 124 },
        { x: 135, y: 288, value: 101 },
        { x: 144, y: 288, value: 94 },
        { x: 153, y: 288, value: 78 },
        { x: 162, y: 288, value: 96 },
        { x: 414, y: 288, value: 59 },
        { x: 423, y: 288, value: 70 },
        { x: 432, y: 288, value: 99 },
        { x: 441, y: 288, value: 75 },
        { x: 450, y: 288, value: 92 },
        { x: 459, y: 288, value: 56 },
        { x: 126, y: 297, value: 114 },
        { x: 135, y: 297, value: 86 },
        { x: 144, y: 297, value: 90 },
        { x: 153, y: 297, value: 96 },
        { x: 162, y: 297, value: 95 },
        { x: 414, y: 297, value: 70 },
        { x: 423, y: 297, value: 100 },
        { x: 432, y: 297, value: 107 },
        { x: 441, y: 297, value: 77 },
        { x: 450, y: 297, value: 87 },
        { x: 144, y: 306, value: 76 },
        { x: 153, y: 306, value: 113 },
        { x: 162, y: 306, value: 108 },
        { x: 171, y: 306, value: 91 },
        { x: 396, y: 306, value: 60 },
        { x: 405, y: 306, value: 67 },
        { x: 414, y: 306, value: 89 },
        { x: 423, y: 306, value: 87 },
        { x: 432, y: 306, value: 103 },
        { x: 441, y: 306, value: 48 },
        { x: 450, y: 306, value: 74 },
        { x: 144, y: 315, value: 92 },
        { x: 153, y: 315, value: 138 },
        { x: 162, y: 315, value: 132 },
        { x: 171, y: 315, value: 111 },
        { x: 180, y: 315, value: 91 },
        { x: 387, y: 315, value: 69 },
        { x: 396, y: 315, value: 65 },
        { x: 405, y: 315, value: 88 },
        { x: 414, y: 315, value: 85 },
        { x: 423, y: 315, value: 93 },
        { x: 432, y: 315, value: 21 },
        { x: 441, y: 315, value: 56 },
        { x: 450, y: 315, value: 72 },
        { x: 153, y: 324, value: 120 },
        { x: 162, y: 324, value: 126 },
        { x: 171, y: 324, value: 124 },
        { x: 180, y: 324, value: 107 },
        { x: 189, y: 324, value: 103 },
        { x: 387, y: 324, value: 97 },
        { x: 396, y: 324, value: 88 },
        { x: 405, y: 324, value: 92 },
        { x: 414, y: 324, value: 95 },
        { x: 423, y: 324, value: 91 },
        { x: 432, y: 324, value: 71 },
        { x: 450, y: 324, value: 60 },
        { x: 153, y: 333, value: 126 },
        { x: 162, y: 333, value: 124 },
        { x: 171, y: 333, value: 119 },
        { x: 180, y: 333, value: 113 },
        { x: 189, y: 333, value: 112 },
        { x: 198, y: 333, value: 82 },
        { x: 369, y: 333, value: 71 },
        { x: 378, y: 333, value: 93 },
        { x: 387, y: 333, value: 104 },
        { x: 396, y: 333, value: 94 },
        { x: 405, y: 333, value: 98 },
        { x: 414, y: 333, value: 92 },
        { x: 423, y: 333, value: 44 },
        { x: 432, y: 333, value: 63 },
        { x: 153, y: 342, value: 126 },
        { x: 162, y: 342, value: 129 },
        { x: 171, y: 342, value: 128 },
        { x: 180, y: 342, value: 125 },
        { x: 189, y: 342, value: 126 },
        { x: 198, y: 342, value: 125 },
        { x: 369, y: 342, value: 110 },
        { x: 378, y: 342, value: 110 },
        { x: 387, y: 342, value: 106 },
        { x: 396, y: 342, value: 102 },
        { x: 405, y: 342, value: 103 },
        { x: 414, y: 342, value: 91 },
        { x: 423, y: 342, value: 78 },
        { x: 153, y: 351, value: 132 },
        { x: 162, y: 351, value: 142 },
        { x: 171, y: 351, value: 148 },
        { x: 180, y: 351, value: 138 },
        { x: 189, y: 351, value: 150 },
        { x: 198, y: 351, value: 154 },
        { x: 207, y: 351, value: 142 },
        { x: 351, y: 351, value: 82 },
        { x: 360, y: 351, value: 104 },
        { x: 369, y: 351, value: 142 },
        { x: 378, y: 351, value: 133 },
        { x: 387, y: 351, value: 136 },
        { x: 396, y: 351, value: 116 },
        { x: 405, y: 351, value: 120 },
        { x: 414, y: 351, value: 101 },
        { x: 423, y: 351, value: 67 },
        { x: 162, y: 360, value: 123 },
        { x: 171, y: 360, value: 135 },
        { x: 180, y: 360, value: 130 },
        { x: 189, y: 360, value: 134 },
        { x: 198, y: 360, value: 140 },
        { x: 207, y: 360, value: 152 },
        { x: 351, y: 360, value: 100 },
        { x: 360, y: 360, value: 115 },
        { x: 369, y: 360, value: 135 },
        { x: 378, y: 360, value: 136 },
        { x: 387, y: 360, value: 129 },
        { x: 396, y: 360, value: 118 },
        { x: 405, y: 360, value: 113 },
        { x: 414, y: 360, value: 100 },
        { x: 423, y: 360, value: 66 },
        { x: 153, y: 369, value: 129 },
        { x: 162, y: 369, value: 130 },
        { x: 171, y: 369, value: 149 },
        { x: 180, y: 369, value: 143 },
        { x: 189, y: 369, value: 149 },
        { x: 198, y: 369, value: 164 },
        { x: 207, y: 369, value: 180 },
        { x: 216, y: 369, value: 88 },
        { x: 351, y: 369, value: 134 },
        { x: 360, y: 369, value: 134 },
        { x: 369, y: 369, value: 164 },
        { x: 378, y: 369, value: 152 },
        { x: 387, y: 369, value: 144 },
        { x: 396, y: 369, value: 130 },
        { x: 405, y: 369, value: 118 },
        { x: 414, y: 369, value: 92 },
        { x: 423, y: 369, value: 59 },
        { x: 153, y: 378, value: 141 },
        { x: 162, y: 378, value: 148 },
        { x: 171, y: 378, value: 135 },
        { x: 180, y: 378, value: 150 },
        { x: 189, y: 378, value: 164 },
        { x: 198, y: 378, value: 169 },
        { x: 207, y: 378, value: 194 },
        { x: 216, y: 378, value: 95 },
        { x: 351, y: 378, value: 153 },
        { x: 360, y: 378, value: 152 },
        { x: 369, y: 378, value: 169 },
        { x: 378, y: 378, value: 151 },
        { x: 387, y: 378, value: 147 },
        { x: 396, y: 378, value: 133 },
        { x: 405, y: 378, value: 116 },
        { x: 414, y: 378, value: 79 },
        { x: 153, y: 387, value: 128 },
        { x: 162, y: 387, value: 147 },
        { x: 171, y: 387, value: 145 },
        { x: 180, y: 387, value: 111 },
        { x: 189, y: 387, value: 160 },
        { x: 198, y: 387, value: 171 },
        { x: 207, y: 387, value: 174 },
        { x: 342, y: 387, value: 78 },
        { x: 351, y: 387, value: 168 },
        { x: 360, y: 387, value: 159 },
        { x: 369, y: 387, value: 171 },
        { x: 378, y: 387, value: 154 },
        { x: 387, y: 387, value: 151 },
        { x: 396, y: 387, value: 129 },
        { x: 405, y: 387, value: 117 },
        { x: 414, y: 387, value: 82 },
        { x: 153, y: 396, value: 102 },
        { x: 162, y: 396, value: 134 },
        { x: 171, y: 396, value: 148 },
        { x: 180, y: 396, value: 140 },
        { x: 189, y: 396, value: 156 },
        { x: 198, y: 396, value: 167 },
        { x: 207, y: 396, value: 166 },
        { x: 351, y: 396, value: 174 },
        { x: 360, y: 396, value: 180 },
        { x: 369, y: 396, value: 171 },
        { x: 378, y: 396, value: 160 },
        { x: 387, y: 396, value: 153 },
        { x: 396, y: 396, value: 134 },
        { x: 405, y: 396, value: 110 },
        { x: 414, y: 396, value: 68 },
        { x: 153, y: 405, value: 79 },
        { x: 162, y: 405, value: 98 },
        { x: 171, y: 405, value: 143 },
        { x: 180, y: 405, value: 144 },
        { x: 189, y: 405, value: 154 },
        { x: 198, y: 405, value: 155 },
        { x: 207, y: 405, value: 94 },
        { x: 351, y: 405, value: 156 },
        { x: 360, y: 405, value: 190 },
        { x: 369, y: 405, value: 174 },
        { x: 378, y: 405, value: 160 },
        { x: 387, y: 405, value: 152 },
        { x: 396, y: 405, value: 118 },
        { x: 405, y: 405, value: 87 },
        { x: 180, y: 414, value: 99 },
        { x: 189, y: 414, value: 112 },
        { x: 198, y: 414, value: 97 },
        { x: 351, y: 414, value: 85 },
        { x: 360, y: 414, value: 229 },
        { x: 369, y: 414, value: 192 },
        { x: 378, y: 414, value: 164 },
        { x: 387, y: 414, value: 141 },
        { x: 360, y: 423, value: 138 },
        { x: 369, y: 423, value: 109 },
        { x: 378, y: 423, value: 94 }
      ]
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
